[Day16] 頁面操作 (v-on) 進階

第 12 屆 iThome 鐵人賽

DAY 16

Modern Web

少年學Vue，如隙中窺月系列第 16 篇

12th鐵人賽

Leo

2020-09-30 22:02:47

799 瀏覽

分享至

帶入參數

我們設定一個 dataArr 陣列，裡面存放 name 還有 money 組成的物件，我們宣告一個 save 方法，傳入一個物件 item 把當成這個方法參數，並將這個方法用 ＠click 綁定在 button 的點擊事件。最後我們使用 v-for 存取 dataArr 的資料，將 dataArr 的值傳入 item ，此時當我們點擊按鈕後，dataArr 就會用 item 物件的方式傳入 save 方法中，執行將物件的 money 加 500。

<body>
    <div class="app">
        <ul>
            <li v-for="item in dataArr">
                {{item.name}}有{{item.money}}$ <input type="button" value="儲值" @click="save(item)">
            </li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            dataArr:[
                {
                    name: 'Leo',
                    money:200
                },
                {
                    name: 'Peter',
                    money:600
                },
                {
                    name: 'Amy',
                    money:500
                }
            ]
        },
        methods:{
            save:function(item){
                item.money+=500;
            }
        }
    });
</script>

事件修飾符

如果我們設定三個 div 區塊，一個 div 區塊包著另一個 div 區塊，並且在 div 區塊內設定點擊方法 show，此方法會秀出 div 區塊的名稱，此時當我點擊最裡面 div 區塊元素時可以發現，我們明明只有點擊到最內部的 div 區塊，console 卻顯示從 box3 到 box1，這是因為我們在觸發動元素時是由內從外觸發。所以我們點擊內部 div 也會觸發到外部的 div 區塊。

<body>
    <div class="app">
        <div style="width:100px;height:100px;background-color: red;" @click="show('box1')">
            <div style="width:50px;height:50px;background-color:black;"@click="show('box2')">
                <div style="width:25px;height:25px;background-color:green;"@click="show('box3')">
                </div>
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        methods:{
            show: function(item){
                console.log(item);
            }
        }
    });
</script>

.stop

若我們在 @click 加上 .stop 就可以讓點擊事件不向外擴散。

<body>
    <div class="app">
        <div style="width:100px;height:100px;background-color: red;"@click.stop="show('box1')">
            <div style="width:50px;height:50px;background-color:black;"@click.stop="show('box2')">
                <div style="width:25px;height:25px;background-color:green;"@click.stop="show('box3')">
                </div>
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
        },
        methods:{
            show: function(item){
                console.log(item);
            }
        }
    });
</script>

.capture

如果我們在 @click 加上 .capture 就可以讓點擊事件變成由外而內觸發，當我們點擊時顯示 box1 → box2

<body>
    <div class="app">
        <div style="width:100px;height:100px;background-color: red;"@click.capture="show('box1')">
            <div style="width:50px;height:50px;background-color:black;"@click.capture="show('box2')">
                <div style="width:25px;height:25px;background-color:green;"@click.capture="show('box3')">
                </div>
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
        },
        methods:{
            show: function(item){
                console.log(item);
            }
        }
    });
</script>

.self

@click 加上 .self，就只會觸發本身事件

<body>
    <div class="app">
        <div style="width:100px;height:100px;background-color: red;"@click.self="show('box1')">
            <div style="width:50px;height:50px;background-color:black;"@click.self="show('box2')">
                <div style="width:25px;height:25px;background-color:green;"@click.self="show('box3')">
                </div>
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
        },
        methods:{
            show: function(item){
                console.log(item);
            }
        }
    });
</script>